<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			li{list-style: none;}
			#box{
				width: 1000px;
				margin: 50px auto;
			}
			#top{
			
				background: #F8F8F8;
				
				height: 40px;
			}
			#top li{
				border: 1px solid #DDDDDD;
				float: right;
				width: 100px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 14px;
				cursor: pointer;
				margin-right: 14px;
			}
			#top li span.red{
				color: red;
			}
			#top li div.hide{				
				width: 100px;	
				font-size: 14px;
				border: 1px solid #DDDDDD;
				background: #fff;
				
			}
			#content{
				width: 100%;
				margin-top: 10px;
			}
			#content li{
			position: relative;
			float: left;
			margin: 5px 14px;
			width: 200px;
			height: 230px;
			padding: 10px;
			border: 1px solid #EEEEEC;
			}
			#content li img{
				width: 200px;
				height: 200px;
			}
			#content li p{
				font-size: 14px;
			}
			#content li div{
				position: absolute;
				bottom: 0;
				right: 0;
				background: red;
				background: url(images/price.png) no-repeat;
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: #fff318;
				font-size: 14px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul id="top">
				
				<li class="li">
					从高到低
				</li>
				<li class="li">
					从低到高
					
				</li>
				<li class="li">
					随机
				</li>
			</ul>
			<ul id="content">
				<li>
					<img src="images/xh_img1.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>800</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img2.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>300</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img3.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>400</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img4.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>500</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img5.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>120</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img6.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>86</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img7.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>780</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img8.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>500</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img9.png" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>590</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img10.png" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>450</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img11.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>530</span>
					</div>
				</li>
				<li>
					<img src="images/xh_img1.jpg" />
					<p>甜美七分袖荷叶边条纹设</p>
					<div>
						￥<span>50</span>
					</div>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			//第二种方法：(思路：把每一个的商品信息存进一个二维数组里面,依据二维数组里面的价格进行数组排序,再重新把数据放进去)
			var aImg = content.getElementsByTagName('img');
			var	aP = content.getElementsByTagName('p');
			var	aSpan = content.getElementsByTagName('span');
			var aBtn = document.getElementsByClassName('li');
			
			var arr = [];
			
			for (var i = 0; i < aImg.length; i++) {
					arr[i] = [];
					arr[i][0] = aImg[i].src;
					arr[i][1] = aP[i].innerHTML;
					arr[i][2] = aSpan[i].innerHTML;
			}
			
			for(var j = 0;j<aBtn.length;j++){
				aBtn[j].index  = j;
				aBtn[j].onclick = function(){
					console.log(this.index);
					if(this.index==2){//随机
						arr.sort(function(a,b){
							return Math.random()*10-5;
						})
					}else if(this.index==1){//从低到高
						arr.sort(function(a,b){
							return a[2]-b[2];
						})
					}else{
						arr.sort(function(a,b){//从高到低
							return b[2]-a[2];
						})
					}
					console.log(arr)
					for(var e = 0;e < aImg.length;e++){
						aImg[e].src= arr[e][0];
						aP[e].innerHTML = arr[e][1];
						aSpan[e].innerHTML = arr[e][2];
					}
				}
			}
		</script>
	</body>
</html>
